import { PageContainer, ProTable } from "@ant-design/pro-components";
import {
  Button,
  Input,
  Form,
  Space,
  Popconfirm,
  Drawer,
  message,
  Image,
  Modal,
} from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useRef, useState } from "react";
import IconTable from "@/components/IconTable/index";
import { PlusOutlined } from "@ant-design/icons";
const Page = (props) => {
  const { dispatch, submitLoading } = props;
  const [open, setOpen] = useState(false);
  const [openIcon, setOpenIcon] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef();
  const [iconUrl, setIconUrl] = useState("");
  const [hasIcon, setHasIcon] = useState(false);
  const deleteItem = (params) => {
    dispatch({
      type: `${namespace}/deleteItem`,
      params,
      callback: () => {
        actionRef.current?.reload();
      },
    });
  };

  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (id, record) => {
      return (
        <Space>
          <a
            type="primary"
            onClick={() => {
              form.resetFields();
              form.setFieldsValue(record);
              setOpen(true);
              setIconUrl(record.iconUrl);
              setHasIcon(false);
            }}
          >
            编辑
          </a>
          <Popconfirm
            title="确定要删除"
            onConfirm={() => deleteItem({ id: record.id })}
          >
            <a style={{ color: "red", marginLeft: "20px" }}>删除</a>
          </Popconfirm>
        </Space>
      );
    },
  };

  const submitForm = async () => {
    const res = await form.validateFields();
    if (res) {
      let { facilityName, id } = res;
      if (!iconUrl) {
        message.error("请选择图标");
        return;
      }
      dispatch({
        type: `${namespace}/submitItem`,
        params: {
          id,
          facilityName,
          iconUrl,
        },
        callback: () => {
          setOpen(false);
          actionRef.current?.reload();
        },
      });
    }
  };

  return (
    <PageContainer>
      <ProTable
        actionRef={actionRef}
        rowKey="id"
        toolBarRender={() => [
          <Button
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              form.resetFields();
              setOpen(true);
              setIconUrl("");
              setHasIcon(false);
            }}
          >
            新增
          </Button>,
        ]}
        pagination={{
          showSizeChanger: true,
        }}
        request={async (params) => {
          return await dispatch({
            type: `${namespace}/queryTable`,
            params,
          });
        }}
        columns={calcColumns({ operate })}
      />

      <Modal
        open={open}
        title="新增设施"
        forceRender
        destroyOnClose={true}
        maskClosable={true}
        width="40%"
        onCancel={() => setOpen(false)}
        footer={
          <Space>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button onClick={submitForm} loading={submitLoading} type="primary">
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <Form.Item name="id" hidden>
            <Input />
          </Form.Item>
          <Form.Item
            label="设施名称"
            name="facilityName"
            rules={[{ required: true, message: "设施名称不能为空" }]}
          >
            <Input type="text" placeholder="请输入设施名称" maxLength={4} />
          </Form.Item>
          <Form.Item
            label="图标"
            name="iconUrl"
            rules={[{ required: true, message: "图标不能为空" }]}
          >
            {iconUrl && <Image src={iconUrl} width={40} height={40} />}
            <a
              onClick={() => {
                setOpenIcon(true);
              }}
              style={{ marginLeft: "10px" }}
            >
              选择图标
            </a>
          </Form.Item>
        </Form>
        <Modal
          open={openIcon}
          title="选择图标"
          forceRender
          destroyOnClose={true}
          maskClosable={true}
          width="60%"
          onCancel={() => setOpenIcon(false)}
          onOk={() => {
            if (iconUrl && hasIcon) {
              form.setFieldsValue({ iconUrl });
              setOpenIcon(false);
            } else {
              message.error("请选择图标");
            }
          }}
        >
          {openIcon && (
            <IconTable
              onSuccess={(e) => {
                setIconUrl(e);
                setHasIcon(true);
              }}
            ></IconTable>
          )}
        </Modal>
      </Modal>
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
